<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
    <div style="margin:150px auto;width: 400px;">
        <form class="layui-form">
            <div class="layui-form-item">
              <label class="layui-form-label">用户名</label>
              <div class="layui-input-inline">
                <input type="text" id="username" name="title" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">密&nbsp;码</label>
              <div class="layui-input-inline">
                <input type="password" id="pwd" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
              </div>
    
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" id="btn" type="button">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
        </div>
</body> 
</html>
<script src='./lib/jquery.min.js'></script>
<!-- 设置ajax的全局参数 -->
<script>
    let  userInput = $("#username");
    let  pwdInput = $("#pwd")
    let  btnObj = $("#btn");
     
    btnObj.click(()=>{
      $.ajax({
            type:"post",
            url:"/api/user/login",
            data:{
                "username":userInput.val(),
                "pwd":pwdInput.val()
            },
            dataType:"json",
            success(result){
            // console.log(data);
             //判断是否登录成功
              if(result.length!=0){
                  alert("登录成功");
                  //把jwt 保存在本地存储中
                  localStorage.setItem("_t",result._t);
                    location.href="/pages/main.html";
             }else{
                 alert("用户名或则密码错误");
             }  
            }
        })
    });

</script>